<template>
	<view class="uni-padding-wrap">
		<view class="page-section swiper" :style="{'height':Height+'rpx'}">
			<view class="page-section-spacing">
				<swiper class="swiper u-skeleton-fillet" :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(a_item,a_index) in swipers" :key="a_index">
						<view class="swiper-item uni-bg-red" :style="{'height':Height+'rpx'}">
							<image :src="a_item.image" @click="alink(a_item)" :style="{'height':Height+'rpx'}"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {swipers} from '../../api/public.js';
	export default {
		name: 'bw-swipers',
		props: {
			Height: { //轮播图高度
				type: Number,
				default: 320
			},
			indicatorDots: { //是否显示面板指示点
				type: Boolean,
				default: true
			},
			autoplay: { //是否自动切换
				type: Boolean,
				default: true
			},
			interval: { //自动切换时间间隔	
				type: Number,
				default: 2000
			},
			duration: { //滑动动画时长
				type: Number,
				default: 500
			},
			position:{ //位置 0=首页,1=商城,2=分类
				type:Number,
				default:0
			}
		},
		data(){
			return{
				swipers:[], //轮播图数据源
			}
		},
		async mounted() {
			const res = await swipers({position:this.position});
			this.swipers = res.data.list;
			console.log(res);
		},
		methods: {
			alink(a_item) {
				this.$emit('Change', a_item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-padding-wrap {
		width: 100%;
		border-radius:20rpx;
	}

	.page-section {
		width: 100%;
	}

	.page-section-spacing {
		width: 100%;
		
		height: 100%;
	}

	.u-skeleton-fillet {
		width: 100%;
		
	}

	.swiper {
		width: 100%;
		height: 100%;
		
		.swiper-item {
			width: 100%;
			border-radius:20rpx;
			image {
				width: 100%;
				border-radius:20rpx;
			}
		}
	}
</style>
